<template>
  <div class="user-receiving-info">
    <h2>收货信息</h2>
    <div class="receiving-table">
      <div class="t-header flex-xbt">
        <span>基本信息</span>
        <span>发票信息</span>
        <span>配送信息</span>
      </div>
      <div class="t-body flex-xbt">
        <div class="td">
          <div class="flex-yc">
            <label>姓名：</label>
            张三疯
          </div>
          <div class="flex-yc">
            <label>收货地址：</label>
            陕西省西安市新城区龙首村
          </div>
          <div class="flex-yc">
            <label>联系电话：</label>
            12313131113
          </div>
        </div>
        <div class="td">
          <div class="flex-yc">
            <label>发票类型：</label>
            电子普通发票
          </div>
          <div class="flex-yc">
            <label>收货抬头：</label>
            个人
          </div>
        </div>
        <div class="td">
          <div class="flex-yc">
            <label>配送方式：</label>
            标准配送
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.user-receiving-info {
  margin-top: 22px;

  > h2 {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500 !important;
  }

  .receiving-table {
    border: 1px solid $borderCol;

    .t-header {
      background-color: #f7f7f7;

      span {
        flex: 1;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;

        & + span {
          border-left: 1px solid $borderCol;
        }
      }
    }

    .t-body {
      .td {
        flex: 1;
        padding: 10px 16px;

        & + .td {
          border-left: 1px solid $borderCol;
        }

        > .flex-yc {
          font-size: 14px;
          font-weight: 400;

          & + .flex-yc {
            margin-top: 10px;
          }

          label {
            width: 70px;
            color: rgb(4 7 36 / 45%);
          }
        }
      }
    }
  }
}
</style>
